<template>
	<view class="container" v-if="boxInfo">
		<u-navbar title-size="34" :title="boxInfo.blind_box.name" back-icon-color="#292940" title-color="#292940" :border-bottom="false"
			:custom-back="tui.goBack" placeholder>
		</u-navbar>
		<view class="content">
			<view class="blind-img">
				<image :src="boxInfo.blind_box.cover_url" mode="aspectFill"></image>
				<image class="back-img" src="/static/home/rota-bg.png" mode="aspectFill"></image>
			</view>
			<view class="base"></view>
			<view class="container-box">
				<view class="brief-box card-shadow">
					<view class="text-292940 font-weight-600 fz-36">{{boxInfo.blind_box.name}}</view>
					<view class="d-flex">
						<view class="d-flex pt-2 pb-2">
							<span class="have-warp d-flex align-items-center">
								<view class="have-text text-343A40 fz-22">拥有</view>
								<view class="d-flex align-items-center have-count">
									<span class="text-292940 font-DIN fz-26">{{boxInfo.count}}</span>
								</view>
							</span>
						</view>
						<view class="d-flex pt-2 pb-2">
							<span class="have-warp d-flex align-items-center sell-count-bg">
								<view class="have-text sell-text-bg text-343A40 fz-22">寄售</view>
								<view class="d-flex align-items-center have-count">
									<span class="text-292940 font-DIN fz-26">{{boxInfo.sell_count}}</span>
								</view>
							</span>
						</view>
					</view>
				</view>
				<view class="author-padding">
					<view class="d-flex justify-content-between align-items-center bilnd-title">
						<view class="font-weight-600 text-292940 fz-34">
							盲盒概率公示
						</view>
						<view class="text-999BA8 fz-24 d-flex">
							<span>您可能抽到以下作品中的</span>
							<span class="text-2E2E4A fz-28 mx-1">1</span>
							<span>个</span>
						</view>
					</view>
					<view class="author-box d-flex align-items-center" v-for="item in workList">
						<view class="author">
							<image :src="item.file" mode="aspectFill"></image>
						</view>
						<view>
							<view class="text-92940 font-weight-600 fz-32 pb-2">{{item.name}}</view>
							<view class="d-flex align-items-center">
								<span class="text-24 text-999BA8">概率</span>
								<span class="text-30 font-DIN text-292940 pl-2">{{tui.accMul(item.rate,100)}}</span>
								<span class="text-28 font-DIN text-292940">%</span>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn-box d-flex justify-content-between align-items-center">
			<u-button type="text" class="text-ffffff fz-36 btn-submit btn-style open-bg" @tap="isBoxShow = true">开启盲盒
			</u-button>
			<u-button type="text" class="text-ffffff fz-36 btn-submit btn-style bid-bg" @tap="showTrue">寄售</u-button>
		</view>
		<u-popup v-model="isBoxShow" @close="close" mode="center">
			<view class="blind-box">
				<view class="gift-box">
					<image src="/static/market/gift-img.png"></image>
				</view>
				<view class="text-ffffff fz-30 text-center">就它了，确定打开？</view>
				<view class="popup-btn-box d-flex justify-content-between align-items-center" >
					<u-button type="text" class="text-666978 fz-32  btn-style popup-cancel-bg" @click="isBoxShow = false">取消</u-button>
					<u-button type="text" class="text-ffffff fz-32  btn-style popup-confirm-bg" :loading="openLoading" @click="userBoxOpen">确认</u-button>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="boxShow" @close="close" mode="center">
			<view class="gift-confirm-box" v-if="blindBoxInfo">
				<view class="gift-confirm">
					<view class="gift-confirm-img mx-auto">
						<image :src="blindBoxInfo.file" mode="aspectFill"></image>
					</view>
					<view class="confirm-btn-box d-flex justify-content-between align-items-center">
						<view class="text-666978 fz-32 d-flex justify-content-center  btn-style popup-cancel-bg">
							<view class="btn-pt">
								<view class="text-292940 fz-32 text-center" @click="againBoxOpen">再开一个</view>
								<view class="d-flex justify-content-center align-items-center text-666978">
									<span class="fz-20">还剩</span>
									<span class="fz-24 font-DIN">{{tui.accSub(boxInfo.count,allSellCount)}}</span>
									<span class="fz-20">个</span>
								</view>
							</view>
						</view>
						<view class="text-ffffff text-center fz-32  btn-style btn-line-height popup-confirm-bg" @click="toWorkDetail">去看看
						</view>
					</view>
				</view>
				<view class="close-icon mx-auto" @click="boxShow = false">
					<image src="/static/market/close-circle.png"></image>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="show" mode="bottom" border-radius="32" close-icon-pos="top-right" @close="close"
			:closeable="true">
			<view class="popup-box">
				<view class="text-292940 font-weight-600 fz-36 tip-dox">盲盒寄售列表</view>
				<scroll-view scroll-y class="internet-h" @scrolltolower="scrolltolower">
					<template>
						<view class="batch-content d-flex justify-content-between align-items-center">
							<view>
								<view class="text-292940 fz-32 font-DIN mb-1">{{boxInfo.blind_box.name}}</view>
								<view class="text-999BA8">
									<span class="fz-24 pr-1">可用</span>
									<span class="fz-28 font-DIN" v-if="boxInfo">{{tui.accSub(boxInfo.count,allSellCount)}}</span>
								</view>
							</view>
							<view class="yellow-bg text-ffffff fz-30 text-center btn" v-if="tui.accSub(boxInfo.count,allSellCount) > 0" @tap="batchShow = true">寄售</view>
							<view class="cancel-bg card-shadow text-666978 fz-30 text-center btn" v-else>寄售</view>
						</view>
						<view class="internet d-flex justify-content-between align-items-center" v-for="(item,index) in sellList">
							<view>
								<view class="text-292940 fz-32 font-DIN mb-1">{{boxInfo.blind_box.name}}</view>
								<view class="d-flex align-items-center">
									<view class="text-999BA8 pr-3">
										<span class="fz-24 pr-1">在售</span>
										<span class="fz-28 font-DIN">{{item.count}}</span>
									</view>
									<view class="text-999BA8">
										<span class="fz-24 pr-1">已售</span>
										<span class="fz-28 font-DIN">{{tui.accSub(item.all_count,item.count)}}</span>
									</view>
								</view>
							</view>
							<view v-if="item.status == 1">
								<view class="text-292940 font-DIN text-center">
									<span class="fz-26">￥</span><span class="fz-32">{{item.price}}</span>
								</view>
								<view class="cancel-bg card-shadow text-666978 fz-30 text-center btn" @click="userBoxCancel(index,item)">取消寄售</view>
							</view>
							<view v-else class="yellow-bg text-ffffff fz-30 text-center btn" @click="onlyShow = true">寄售</view>
						</view>
					</template>
					<u-loadmore :status="status" v-show="moreShow" margin-top="50" class="pb-3" />
				</scroll-view>
			</view>
		</u-popup>
		<u-popup v-model="batchShow" mode="center" border-radius="16" close-icon-pos="top-right" :closeable="true"
			@close="close">
			<view class="album-box">
				<view class="title">
					盲盒寄售
				</view>
				<view class="item mb-0">
					<label class="text-36363A fz-32">寄售数量</label>
					<u-input v-model="count" :focus="batchShow" :custom-style="customStyle" height="80" border="bottom"
						class="input-box" clearable label-width="0" placeholder="请输入寄售数量" type="number"
						placeholder-style="color:#CCCDD5;" :border="false" clear-size="36">
					</u-input>
				</view>
				<view class="item">
					<label class="text-36363A fz-32">寄售价格</label>
					<u-input v-model.number="price" :custom-style="customStyle" height="80" border="bottom"
						class="input-box" clearable label-width="0" placeholder="请输入寄售单价" type="number"
						placeholder-style="color:#CCCDD5;" :border="false" clear-size="36">
					</u-input>
				</view>
				<u-button class="add-btn" :loading="sellLoading" @click="isCanSell" hover-class="none">寄售
				</u-button>
			</view>
		</u-popup>
		<u-popup v-model="onlyShow" mode="center" border-radius="16" close-icon-pos="top-right" :closeable="true"
			@close="close">
			<view class="album-box">
				<view class="title">
					盲盒寄售
				</view>
				<view class="item mb-0">
					<label class="text-36363A fz-32">寄售数量</label>
					<u-input v-model="count" :focus="onlyShow" color="#D8DEE4" :custom-style="customStyle" height="80" border="bottom"
						class="input-box" disabled label-width="0" placeholder="请输入寄售数量" type="number"
						placeholder-style="color:#CCCDD5;" :border="false" clear-size="36">
					</u-input>
				</view>
				<view class="item">
					<label class="text-36363A fz-32">寄售价格</label>
					<u-input v-model.number="price" :custom-style="customStyle" height="80" border="bottom"
						class="input-box" clearable label-width="0" placeholder="请输入寄售单价" type="number"
						placeholder-style="color:#CCCDD5;" :border="false" clear-size="36">
					</u-input>
				</view>
				<u-button class="add-btn" :loading="sellLoading" @click="isCanSell" hover-class="none">寄售
				</u-button>
			</view>
		</u-popup>
		<u-modal v-model="fundShow" confirm-color="#00C0FF" show-cancel-button  content="是否前往设置资金密码？" @confirm="toFundPwd"></u-modal>
		<u-modal v-model="showOpenWallet" confirm-color="#00C0FF" show-cancel-button  content="确定前往开通钱包吗？" @confirm="toWallet"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				splitList: [],
				total: '',
				boxShow: false,
				batchShow: false,
				onlyShow:false,
				price: '',
				count: 1,
				customStyle: {
					fontSize: '32upx'
				},
				sellLoading: false,
				show: false,
				boxInfo:null,
				page:1,
				sellList:[],
				total:'',
				status:'loading',
				workList:[],
				isBoxShow:false,
				blindBoxInfo:null,
				openLoading:false,
				fundShow:false,
				showOpenWallet:false
			}
		},
		onLoad(options) {
			this.box_id = options.box_id
			this.user_box_id = options.user_box_id
			this.getBoxShow()
			this.userBoxSellList()
		},
		computed: {
			USER() {
				return this.$store.state.auth.USER
			},
			allSellCount(){
				let count = 0
				for(let i of this.sellList){
					count = count + i.all_count
				}
				return count
			}
		},
		watch:{
			//强制正整数
			count(val){
				if(val !== ''){
					this.$nextTick(()=>{
						this.count = val.replace(/^(0+)|[^\d]+/g,'')
					})
				}
			}
		},
		methods: {
			//前往开通钱包
			toWallet(){
				uni.navigateTo({
					url:'/pages/secondary/mine/wallet'
				})
			},
			showTrue(){
				if(this.USER.is_official != 1){
					if(this.USER.wallet_count == 0){
						return this.showOpenWallet = true
					}
				}
				if(!this.USER.has_second_password){
					return this.fundShow = true
				}
				this.show = true
			},
			//前往设置资金密码
			toFundPwd(){
				uni.navigateTo({
					url:'/pages/setting/capital-password'
				})
			},
			//盲盒详情
			getBoxShow(){
				this.$store.dispatch('user/userBoxShow',{user_box_id:this.user_box_id}).then(res=>{
					this.boxInfo = res.data.userBox
					this.workList = res.data.works
				})
			},
			//挂售列表
			userBoxSellList(val){
				if(val == 1){
					this.page = 1
					this.total = ''
					this.sellList = []
				}
				this.status = 'loading'
				this.moreShow = true
				this.$store.dispatch('user/userBoxSellList',{box_id:this.box_id,page:this.page}).then(res=>{
					this.moreShow = false
					this.total = res.data.total
					this.sellList = [...this.sellList,...res.data.data]
				})
			},
			//盲盒挂售
			userBoxSell(){
				this.sellLoading = true
				this.$store.dispatch('user/userBoxSell',{count:this.count,price:this.price,user_box_id:this.user_box_id}).then(res=>{
					this.batchShow = false
					this.sellLoading = false
					this.userBoxSellList(1)
					this.getBoxShow()
				}).catch(error=>{
					this.sellLoading = false
				})
			},
			//取消盲盒挂售
			userBoxCancel(index,item){
				this.$store.dispatch('user/userBoxCancel',{market_id:item.id}).then(res=>{
					this.userBoxSellList(1)
				})
			},
			//开启盲盒
			userBoxOpen(){
				this.openLoading = true
				this.isBoxShow = false
				this.$store.dispatch('user/userBoxOpen',{user_box_id:this.user_box_id,count:1}).then(res=>{
					this.$store.commit('works/SET_ISREFRESH',true)
					this.openLoading = false
					this.blindBoxInfo = res.data[1].works
					this.getBoxShow()
					setTimeout(()=>{
						this.boxShow = true
					},100)
				}).catch(error=>{
					this.openLoading = false
				})
			},
			//再次开启盲盒
			againBoxOpen(){
				if(this.tui.accSub(this.boxInfo.count,this.allSellCount) == 0){
					return uni.$u.toast('可用盲盒数量不足~')
				}
				uni.showLoading({
					title:'开启中...'
				})
				this.boxShow = false
				this.$store.dispatch('user/userBoxOpen',{user_box_id:this.user_box_id,count:1}).then(res=>{
					this.$store.commit('works/SET_ISREFRESH',true)
					this.blindBoxInfo = res.data[1].works
					this.getBoxShow()
					setTimeout(()=>{
						uni.hideLoading()
						this.boxShow = true
					},600)
				}).catch(error=>{
					uni.hideLoading()
				})
			},
			//标识列表上拉加载
			scrolltolower() {
				if (!this.moreShow && this.sellList.length < this.total) {
					this.page++
					this.userBoxSellList()
				}else{
					this.moreShow = true
					this.status = 'nomore'
				}
			},
			close() {
				this.count = 1
			},
			//批量寄售
			isCanSell(val) {
				if (this.count === '') {
					return uni.$u.toast('请输入寄售数量')
				}
				if (this.price === '') {
					return uni.$u.toast('请输入寄售价格')
				}
				this.userBoxSell()
			},
			toWorkDetail(){
				this.boxShow = false
				uni.navigateTo({
					url:`/pages/secondary/collection/index?work_id=${this.blindBoxInfo.id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		min-height: 100vh;
		background: #F8F9FB;
	}

	.content {
		width: 100%;
		padding: 43upx 0upx 0upx 0upx;
		box-sizing: border-box;
		background: #F8F9FB;
	}

	.blind-img {
		width: 580upx;
		height: 580upx;
		border-radius: 24upx;
		// background: linear-gradient(180deg, rgba(228, 228, 228, 1), rgba(175, 175, 175, 1));
		background: linear-gradient(180deg, #BAB5BA , #3B394A);
		margin: 0 auto;
		transform-style: preserve-3d;
		position: relative;
		animation: run 24s linear infinite;
		image{
			position: absolute;
			width: 560upx;
			height: 560upx;
			left: 10upx;
			top: 10upx;
			border-radius: 18upx;
			backface-visibility: hidden;
		}
		.back-img{
			transform: rotateY(180deg);
		}

	}
	@keyframes run {
		from{
			transform: rotateY(0deg);
		}
		to{
			transform: rotateY(360deg);
		}
	}
	.base{
		width: 100%;
		height: 210upx;
		background: url('/static/market/base-img.png') no-repeat;
		background-size: 100% 100%;
		margin-top: -30upx;
	}
	.container-box{
		width: 100%;
		padding: 0 24upx 160upx;
		margin-top: -40upx;
	}
	.brief-box {
		width: 100%;
		border-radius: 10px;
		padding: 27upx 23upx;
		margin-bottom: 20upx;
		box-sizing: border-box;
		height: 164upx;
		background: #FFFFFF;
		box-shadow: 0px 4px 30px -12px rgba(102, 105, 120, 0.2), 0px 4px 12px -6px rgba(154, 166, 219, 0.1);

		.me-icon {
			width: 36upx;
			height: 36upx;
			margin-right: 10upx;

		}

		.lable {
			display: inline-block;
			height: 40upx;
			line-height: 40upx;
			background: linear-gradient(44deg, rgba(255, 237, 188, .65) 0%, rgba(255, 248, 222, .65) 100%);
			border-radius: 20upx 20upx 20upx 2upx;
			color: #C97F37;
			padding: 0 20upx;
			margin: 22upx 20upx 22upx 0;

			image {
				width: 26upx;
				height: 26upx;
				margin-right: 10upx;
			}
		}

	}

	.author-padding {
		width: 100%;
		padding: 0 23upx 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 10upx;
	}

	.more-icon {
		width: 28upx;
		height: 28upx;
		margin-left: 10upx;

		image {
			width: 28upx;
			height: 28upx;
		}
	}

	.author-box {
		width: 100%;
		height: 146upx;
		border-radius: 16upx;
		border: 0.5px solid rgba(216, 222, 228, 0.8);
		margin-bottom: 20upx;
		padding: 0 16upx;

		.author {
			width: 112upx;
			height: 112upx;
			border-radius: 8upx;
			margin-right: 20upx;

			image {
				width: 112upx;
				height: 112upx;
				border-radius: 8upx;
			}
		}

	}

	.border {
		border-bottom: 1upx solid rgba(216, 222, 228, .8);
	}

	.btn-box {
		width: 100%;
		position: fixed;
		padding: 14upx 30upx 14upx 24upx;
		box-sizing: border-box;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		background: #FFFFFF;

		.delete-box {}

		.btn-style {
			width: 339upx;
			height: 98upx;
			border-radius: 49upx;
			margin-right: 0;

		}

		.open-bg {
			background: linear-gradient(135deg, #2F9CFF 0%, #FE41FF 100%);
			;
		}

		.bid-bg {
			background: #292940;
		}

	}

	/deep/.u-close--top-right {
		top: 18upx;
	}

	/deep/.u-checkbox__icon-wrap {
		background: #F8F9FB;
	}

	.have-warp {
		display: inline-block;
		min-width: 108upx;
		height: 36upx;
		line-height: 36upx;
		background: #F8F2FF;
		border-radius: 8upx;
		position: relative;
		margin-right: 24upx;
		margin-top: 6upx;
		border: 1upx solid rgba(235,186,255,0.5);

		.have-text {
			display: inline-block;
			padding: 0 10upx;
			height: 36upx;
			line-height: 36upx !important;
			background: linear-gradient(180deg, #9FBBFD 0%, #DCB2FF 100%);
			border-radius: 8upx 0upx 16upx 8upx;
		}

		.sell-text-bg {
			background: linear-gradient(360deg, rgba(30,247,254,0.95) 0%, rgba(122,96,255,0.4) 100%);
			
		}

		.have-count {
			display: inline-block;
			height: 36upx;
			line-height: 36upx;
			padding: 0 10upx;
			margin: 0 auto;
		}
	}
	.sell-count-bg {
		background: #EAFDFF;
		border: 1upx solid #BAF5FF;
		
	}

	.bilnd-title {
		width: 100%;
		height: 94upx;

	}

	.text-2E2E4A {
		color: #2E2E4A;
	}

	/deep/.u-mode-center-box {
		background: rgba(255, 255, 255, 0);
	}

	.blind-box {
		background: rgba(255, 255, 255, 0);
		width: 525upx;
		height: 570upx;
	}

	.gift-box {
		width: 525upx;
		height: 358upx;
		margin-bottom: 40upx;
		animation: jump 4s ease-in-out infinite;
		image {
			width: 525upx;
			height: 358upx;
		}
	}
	@keyframes jump{
		0%{
			transform: translateY(0upx);
		}
		50%{
			transform: translateY(30upx);
		}
		100%{
			transform: translateY(0upx);
		}
	}
	.popup-btn-box {
		margin-top: 35upx;

		.btn-style {
			width: 248upx;
			height: 88upx;
			border-radius: 49upx;
		}
	}

	.popup-confirm-bg {
		background: linear-gradient(135deg, #2F9CFF 0%, #FE41FF 100%);
	}

	.popup-cancel-bg {
		background: linear-gradient(90deg, #D9CAFF 0%, #C5D2FE 100%);
	}

	.album-box {
		width: 640upx;
		background: #FFFFFF;
		padding: 50upx 45upx 60upx 45upx;

		.title {
			color: #292940;
			font-size: 36upx;
			text-align: center;
			font-weight: 500;
		}

		.item {
			width: 100%;
			height: 182upx;
			box-sizing: border-box;
			padding-top: 50upx;
			border-bottom: 1upx solid #D8DEE4;
			position: relative;
			margin-bottom: 60upx;
			color: #292940;
			font-size: 36upx;

			.input-box {
				width: 100%;
				margin-top: 10upx !important;
				font-size: 40upx !important;
			}
		}

		.add-btn {
			width: 544upx;
			height: 98upx;
			background: #292940 !important;
			border-radius: 49upx;
			color: #FFFFFF;
			font-size: 36upx;
			text-align: center;
		}

	}

	.gift-confirm-box {
		width: 682upx;
		height: 960upx;

		.gift-confirm {
			width: 682upx;
			height: 809upx;
			background-image: url(/static/market/gift-confirm.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			padding-top: 139upx;
			background-size: border-box;
			margin-bottom: 80upx;

			.gift-confirm-img {
				width: 490upx;
				height: 490upx;

				image {
					width: 490upx;
					height: 490upx;
				}
			}
		}

		.close-icon {
			width: 64upx;
			height: 64upx;

			image {
				width: 64upx;
				height: 64upx;
			}
		}
	}

	.confirm-btn-box {
		width: 560upx;
		padding: 0 20upx;
		height: 88upx;
		margin: 66upx auto 0;

		.btn-style {
			width: 248upx;
			height: 88upx;
			border-radius: 49upx;

		}

		.btn-pt {
			padding-top: 16upx;
		}

		.btn-line-height {
			line-height: 88upx;
		}
	}

	.popup-box {
		width: 100%;
		background: #ffffff;
		padding: 66upx 0 0;
		box-sizing: border-box;

		.tip-dox {
			height: 76upx;
			padding: 0 30upx;
			box-sizing: border-box;
		}

		.filter-icon {
			width: 44upx;
			height: 44upx;
			margin-left: 20upx;

			image {
				width: 44upx;
				height: 44upx;
			}
		}

		.popup-title {
			padding-bottom: 21upx;
		}

		.batch-content {
			width: 100%;
			padding: 0 30upx;
			box-sizing: border-box;
			height: 120upx;
			border-bottom: 1upx solid rgba(216, 222, 228, .6);
		}

		.internet-h {
			// min-height: 390upx;
			// max-height: 714upx;
			height: 720upx;
			overflow-y: auto;
		}

		.internet {
			width: 100%;
			padding: 0 30upx;
			box-sizing: border-box;
			height: 120upx;
			border-bottom: 1upx solid rgba(216, 222, 228, .6);
		}

		.internet:nth-last-of-type(1) {
			border-bottom: none;
			margin-bottom: 20upx;
		}

		.btn {
			width: 158upx;
			height: 56upx;
			line-height: 56upx;
			border-radius: 44upx;
		}

		.pt {
			margin-top: 6upx;
		}
	}

	/deep/.uicon-close:before {
		margin-top: 6px;
	}
</style>
